<%--
  Created by IntelliJ IDEA.
  User: 李小清
  Date: 2025/5/13
  Time: 16:51
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>订单提交成功</title>
    <style>
        /* 全局样式 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            background-color: #f4f4f4;
        }

        /* 头部样式 */
        .header {
            background-color: #333;
            color: white;
            padding: 1rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .logo a {
            color: white;
            text-decoration: none;
            font-size: 1.5rem;
            font-weight: bold;
        }

        .nav a {
            color: white;
            text-decoration: none;
            margin-left: 1rem;
        }

        .nav a:hover {
            color: #ddd;
        }

        /* 内容区域样式 */
        .content {
            max-width: 1200px;
            margin: 20px auto;
            padding: 0 20px;
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            padding: 20px;
        }

        /* 页脚样式 */
        .footer {
            background-color: #333;
            color: white;
            text-align: center;
            padding: 1rem;
            position: fixed;
            bottom: 0;
            width: 100%;
        }

        /* 表单样式 */
        .form-group {
            margin-bottom: 1rem;
        }

        .form-group label {
            display: block;
            margin-bottom: 0.5rem;
        }

        .form-group input {
            width: 100%;
            padding: 0.5rem;
            border: 1px solid #ddd;
            border-radius: 4px;
        }

        .btn {
            display: inline-block;
            padding: 0.5rem 1rem;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        .btn:hover {
            background-color: #0056b3;
        }

        /* 消息提示样式 */
        .error-message {
            color: red;
            padding: 10px;
            margin-bottom: 10px;
            border: 1px solid red;
            border-radius: 4px;
            background-color: #ffe6e6;
        }

        .success-message {
            color: green;
            padding: 10px;
            margin-bottom: 10px;
            border: 1px solid green;
            border-radius: 4px;
            background-color: #e6ffe6;
        }

        .button {
            display: inline-block;
            padding: 10px 20px;
            font-size: 16px;
            color: #fff;
            background-color: #28a745;
            border: none;
            border-radius: 5px;
            text-decoration: none;
            cursor: pointer;
        }

        .button:hover {
            background-color: #218838;
        }
    </style>
</head>
<body>
<div class="header">
    <div class="logo">
        <a href="${pageContext.request.contextPath}/">我的商城</a>
    </div>
    <div class="nav">
        <a href="${pageContext.request.contextPath}/">首页</a>
        <a href="${pageContext.request.contextPath}/order/">我的订单</a>
    </div>
</div>

<div class="content">

<%--    <h1>订单提交成功！去支付</h1>--%>

    <p>订单编号：<span id="orderNo">${orderNo}</span></p>
    <p>总金额：<span id="totalPrice">${totalPrice}</span></p>
    <p>支付方式：<span>${payType}</span></p>
    <a href="${pageContext.request.contextPath}/order/" class="btn">查看订单列表</a>

    <button onclick="submit_pay()" class="button">去支付</button>

<%--    <div>--%>
<%--        <input id="orderId" type="hidden" name="orderId" value="${OrderNo}">--%>
<%--        <input type="hidden" name="payType" value="${payType}">--%>
<%--        <input id="submit_pay" class="submit_pay"  value="立即支付" />--%>
<%--        <input class="friend_pay" type="button" id="friendPay" value="朋友代付" />--%>
<%--    </div>--%>

</div>
<div class="footer">
    <p>我的商城</p>
</div>

<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/jquery-3.7.1.min.js"></script>
<script>

    function submit_pay(){
                $.ajax({
                    url:"${pageContext.request.contextPath}/order/alipay/pay?orderId=${orderNo}",
                    type:"post",

                    success:function (res){
                        if(res){
                            window.location.href=res;//跳转到支付页面

                        }else{
                            alert("支付宝提交失败,请重新尝试");
                        }
                    }
                })
    }

    <%--function submit_pay() {--%>
    <%--    // 获取订单号和总金额--%>
    <%--    const orderNo = document.getElementById("orderNo").innerText.trim();--%>
    <%--    const totalPriceText = document.getElementById("totalPrice").innerText.trim();--%>

    <%--    // 去除人民币符号并转换为数字--%>
    <%--    const amount = parseFloat(totalPriceText.replace('￥', ''));--%>
    <%--    console.log(amount)--%>
    <%--    if (!orderNo || isNaN(amount)) {--%>
    <%--        alert("订单信息不完整，请刷新页面重试");--%>
    <%--        return;--%>
    <%--    }--%>

    <%--    // 方式一：使用 fetch 提交 POST 请求（推荐）--%>
    <%--    fetch("${pageContext.request.contextPath}/alipay/pay", {--%>
    <%--        method: "POST",--%>
    <%--        headers: {--%>
    <%--            "Content-Type": "application/json"--%>
    <%--        },--%>
    <%--        body: JSON.stringify({--%>
    <%--            outTradeNo: orderNo,--%>
    <%--            totalAmount: amount,--%>
    <%--            subject: "订单支付"--%>
    <%--        })--%>
    <%--    })--%>
    //         .then(response => response.text())
    //         .then(url => {
    //             if (url.startsWith("http")) {
    //                 window.location.href = url; // 跳转到支付宝页面
    //             } else {
    //                 alert("服务器未返回有效的支付链接：" + url);
    //             }
    //         })
    //         .catch(error => {
    //             console.error("支付请求失败:", error);
    //             alert("支付请求失败，请稍后再试。");
    //         });
    // }

    <%--$(function (){--%>
    <%--    --%>
    <%--    $("#submit_pay").click(function (){--%>
    <%--       --%>
    <%--        $.ajax({--%>
    <%--            url:"${pageContext.request.contextPath}/order/alipay/pay?orderId=${orderNo}",--%>
    <%--            type:"post",--%>
    <%--            --%>
    <%--            success:function (res){--%>
    <%--                if(res){--%>
    <%--                    window.location.href=res;//跳转到支付页面--%>

    <%--                }else{--%>
    <%--                    alert("支付宝提交失败,请重新尝试");--%>
    <%--                }--%>
    <%--            }--%>
    <%--        })--%>
    <%--    });--%>
    <%--})--%>
</script>
</body>
</html>